<template>
    <a-space direction="vertical" style="width: 100%;max-height:550px;overflow-y: scroll;">
        <a-row style="margin-bottom: 5px">
            <a-col :span="8">
                <span>参数名称</span>
            </a-col>
            <a-col :span="1" />
            <a-col :span="8">
                <div>参数默认值</div>
            </a-col>
            <a-col :span="1" />
            <a-col :span="2">
                <div>参数描述</div>
            </a-col>
            <a-col :span="1" />
            <a-col :span="1">
            </a-col>
        </a-row>
        <a-row style="margin-bottom: 5px">
            <a-space direction="vertical" style="width: 100%">
                <a-row v-for="(item, index) in parmars" :key="index">
                    <a-col :span="8">
                        <a-tooltip placement="right">
                            <template #title>{{ item.description }}</template>
                            <a-input v-model:value="item.name" size="small"
                                class="ant-input-group-wrapper input-my-disabled" disabled> </a-input>
                        </a-tooltip>
                    </a-col>
                    <a-col :span="1" />
                    <a-col :span="8">
                        <a-input v-model:value="item.default" size="small" class="ant-input-group-wrapper "
                            v-if="item.type == 'input'" />
                        <a-select style="width: 100%" allowClear placeholder="请选择"
                            v-model:value="parmars[index].default" :options="item.select"
                            :field-names="{ label: 'name', value: 'value' }" size="samll" v-if="item.type == 'select'"
                            @change="parmars_default_change(item.name, item.default)" />
                    </a-col>
                    <a-col :span="1" />
                    <a-col :span="2">
                        <a-tooltip placement="right">
                            <template #title>{{ item.description }}</template>
                            <question-circle-outlined class="ico-tips" />
                        </a-tooltip>
                    </a-col>
                    <a-col :span="1" />
                    <a-col :span="1">
                    </a-col>
                </a-row>
            </a-space>
        </a-row>

    </a-space>
</template>
<script>
import { defineComponent, watch } from 'vue';
export default defineComponent({
    props:{
        type:String,
        parmars:Array,
        except: Array,
    },
    emits: ["save_parmars", "select_parmar_change"],
    setup(props,ctx) {
        console.log(ctx)
        watch(props, val => {
            console.log(props)
            ctx.emit("save_parmars",props)
        });
        const add_par = () => {
            props.parmars.push({
                default:"",
                name: "",
            })
        };
        const delete_par = (index) => {
            props.parmars.splice(index,1)
        };
        const parmars_default_change = (option, ArrayOption) => {
            ctx.emit("select_parmar_change", {
                type: option,
                value:ArrayOption
            }) 
            // console.log(option, ArrayOption)
        };
        return {
            add_par,
            delete_par,
            parmars_default_change,
        };
    },
});
</script>
<style>
    .input-my-disabled{
        color: rgb(38 38 108) !important;
        background-color: #ffffff !important;
    }
</style>

